<template>
    <div class="Register">
        <Head msg="用户注册"></Head>
        <!--    <div class="login-title">用户注册</div>-->
        <div class="login-list">
            <div><span style="color: red">* </span>手机号：</div>
            <input type="number" placeholder="请输入正确手机号" v-model="tel" v-on:focus="monitor"></input>
            <img class="text-pic" v-if="imgstatus==-1" :src="publicPath+'img/icons/icon-error.png'">

            <!--      <img class="text-pic" v-if="telicon!==''" :src="telicon?publicPath+'img/icons/icon-right.png':publicPath+'img/icons/icon-error.png'">-->
        </div>
        <div class="login-list">
            <div><span style="color: red">* </span>密码：</div>
            <input type="password" placeholder="请输入密码,不少于6位" v-model="psd"></input>
            <!--      <img class="text-pic" v-if="psdicon!==''" :src="psdicon?publicPath+'img/icons/icon-right.png':publicPath+'img/icons/icon-error.png'">-->
        </div>
        <div class="login-list">
            <div><span style="color: red">* </span>确认密码：</div>
            <input type="password" placeholder="请再次输入密码" v-model="repsd" v-on:focus="monitor"></input>
            <img class="text-pic" v-if="imgstatus==-3" :src="publicPath+'img/icons/icon-error.png'">
            <!--      <img class="text-pic" v-if="repsdicon!==''" :src="repsdicon?publicPath+'img/icons/icon-right.png':publicPath+'img/icons/icon-error.png'">-->
        </div>
        <div class="login-list">
            <div><span style="color: red">* </span>昵称：</div>
            <input type="text" placeholder="请输入昵称" class="login-code-input" v-model="name" v-on:focus="monitor"></input>
            <img class="text-pic" v-if="imgstatus==-4" :src="publicPath+'img/icons/icon-error.png'">
        </div>
        <div class="login-list">
            <div><span style="color: red">* </span>性别：</div>
            <input type="radio" name="sex" class="login-code-input" @click="sexchange(1)" checked></input>男
            <input style="margin-left: 5px" type="radio" name="sex" class="login-code-input"
                   @click="sexchange(2)"></input>女
        </div>
        <div class="login-list">
            <div><span style="color: red">* </span>验证码：</div>
            <input type="text" placeholder="请输入验证码" class="login-code-input" v-model="code"
                   v-on:focus="monitor"></input>
            <img class="text-pic" v-if="imgstatus==-2" :src="publicPath+'img/icons/icon-error.png'">
        </div>
        <div class="login-code-main">
            <img class="login-code" :src="codeurl"/>
            <div class="code-fresh-btn" @click="codeFresh">刷新</div>
        </div>
        <div class="login-btn" @click="register">立即注册</div>
    </div>
</template>

<script lang="ts">
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";
    import Head from "@/components/Head.vue";
    import Radio from "cube-ui/src/components/radio/radio.vue";

    @Component({
        components: {
            Radio,
            Head,
        },
    })

    export default class Register extends Sence {
        private publicPath: string = process.env.BASE_URL;
        public tel: string = "";//手机号
        public psd: string = "";//密码
        public repsd: string = "";//确认密码
        public name: string = "";//昵称
        public code: string = "";//验证码
        public codeurl: string = this.apiurl+"captcha.html";//验证码url
        public sex: any = 1;//性别
        public imgstatus: any = 1;//状态码
        // public repsdicon:any='';//确认密码验证
        // public psdicon:any='';//密码验证
        // public telicon:any='';//手机验证


        public codeFresh(): void {
            const that = this;
            that.codeurl = this.apiurl+"captcha.html?d=" + Math.random();
        }


        //注册
        public register(): void {

            if (this.tel.length != 11) {
                this.toast("手机号输入错误！", "warn");
                return;
            } else if (this.name == "") {
                this.toast("昵称不能为空！", "warn");
                return;
            } else if (this.psd == "") {
                this.toast("密码不能为空！", "warn");
                return;
            } else if (this.psd != this.repsd) {
                this.toast("两次密码输入不一致！", "warn");
                return;
            } else if (this.code == "") {
                this.toast("验证码不能为空！", "warn");
                return;
            }

            this.post("api/v1/register", {
                mobile: this.tel,
                nickname: this.name,
                captcha: this.code,
                passwd: this.psd,
                passwd1: this.repsd,
                gender: this.sex
            }).then((res: any) => {
                if (res.data.code == 1) {
                    this.set("user", res.data.userInfo);
                    this.toast("注册成功,即将前往登录");
                    setTimeout(() => {
                        (<any> this).$router.push("/login");
                    }, 2000);
                } else {
                    this.imgstatus = res.data.code;
                    this.toast(res.message, "warn");
                }

            });
        }

        //表单监听
        public monitor() {
            this.imgstatus = 1;
        }

        // //手机号监听验证
        // public teltext():void{
        //   if(this.tel.length==11){
        //     this.telicon=true;
        //   }else {
        //     this.telicon=false;
        //
        //   }
        // }
        //
        // //密码监听验证
        // public psdtext():void{
        //   if(this.psd.length>=6){
        //     this.psdicon=true;
        //   }else {
        //     this.psdicon=false;
        //
        //   }
        // }
        //
        // //确认密码监听验证
        // public repsdtext():void{
        //   if(this.repsd==this.psd&&this.psd!==''){
        //     this.repsdicon=true;
        //   }else {
        //     this.repsdicon=false;
        //
        //   }
        // }

        //性格
        public sexchange(value: number): void {
            this.sex = value;
        }

    }
</script>

<style scoped lang="stylus">
    input
        border 1px solid #808080
        height 25px

    .text-pic
        margin-left 5px;
        width 28px;
        height 28px;

    .login-title
        height 80px
        text-align center
        background #4876ff
        color white
        font-weight bold
        font-size 16px
        line-height 80px


    .login-list
        display flex
        flex-direction row
        align-items center
        margin-top 20px

        > div
            width 33vw;
            text-align right

    .login-code-main
        display flex
        flex-direction row
        justify-content center
        align-items center
        margin-top 20px

        .login-code
            width 140px
            height 40px

        .login-code-input
            width 30vw

        .code-fresh-btn
            padding 0 10px
            height 30px
            line-height 30px
            background #ff6347
            color white
            font-weight bold
            margin-left 10px
            font-size 12px

    .login-btn
        margin auto
        margin-top 15vh
        background red
        color white
        width 30vw
        font-weight bold
        padding 8px 0
        font-size 15px


</style>
